<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.refundOrderId" placeholder="请输入退款订单号" clearable />
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<el-space>
			<!-- <el-space>
				<el-button icon="Plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-space> -->
			<el-space>
				<el-button plain icon="Download" @click="downloadHandle('/ss/refund-order/export')">导出</el-button>
			</el-space>
			<el-space>
				<el-button icon="Delete" plain type="danger" @click="deleteBatchHandle()">批量删除</el-button>
			</el-space>
		</el-space>
		<el-table 
			v-loading="state.dataListLoading" 
			:data="state.dataList" 
			border 
			class="layout-table" 
			show-overflow-tooltip 
			@selection-change="selectionChangeHandle"
		>
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="refundOrderId" label="退款订单号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="refundOrderStatus" label="退款订单状态" header-align="center" align="center">
				<template #default="scope">
					<el-tag :type="getStatusTag(scope.row.refundOrderStatus)">
						{{ getStatusText(scope.row.refundOrderStatus) }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="refundOrderAmount" label="退款订单金额" header-align="center" align="center">
				<template #default="scope">
					¥ {{ scope.row.refundOrderAmount }}
				</template>
			</el-table-column>
			<el-table-column prop="refundFromOrderId" label="退款订单所属订单" header-align="center" align="center"></el-table-column>
			<el-table-column prop="refundReason" label="退款备注" header-align="center" align="center"></el-table-column>
			<el-table-column prop="refundTransactionId" label="退款对应微信id" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="250">
				<template #default="scope">
					<el-button 
						type="primary" 
						link 
						@click="addOrUpdateHandle(scope.row.id)"
						v-permission="'refund:update'"
					>修改</el-button>
					<el-button 
						type="primary" 
						link 
						@click="deleteBatchHandle(scope.row.id)"
						v-permission="'refund:delete'"
					>删除</el-button>
					<el-button 
						type="success" 
						link 
						@click="refundHandle(scope.row)"
						v-permission="'refund:refund'"
						
					>退款</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update 
			v-if="addOrUpdateVisible" 
			ref="addOrUpdateRef" 
			v-model:visible="addOrUpdateVisible" 
			@refreshDataList="getDataList"
		></add-or-update>

		<!-- 退款弹窗 -->
		<el-dialog 
			v-model="refundDialogVisible" 
			title="确认退款" 
			width="500px"
		>
			<el-form 
				:model="refundForm" 
				:rules="refundRules" 
				ref="refundFormRef" 
				label-width="100px"
			>
				<el-form-item label="退款金额" prop="amount">
					<el-input-number 
						v-model="refundForm.amount" 
						:min="0.01" 
						:precision="2"
						controls-position="right"
						style="width: 100%"
					>
					</el-input-number>
					<div class="tips">已退款金额：{{ originAmount }} 元</div>
				</el-form-item>
				<el-form-item label="退款原因" prop="refundDesc">
					<el-input 
						v-model="refundForm.refundDesc" 
						type="textarea" 
						placeholder="请输入退款原因"
					></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="refundDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmRefund">确 定</el-button>
			</template>
		</el-dialog>
	</el-card>
</template>

<script setup lang="ts" name="OrderRefundOrderIndex">
import { useCrud } from '@/hooks'
import { reactive, nextTick, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import request from '@/utils/request'
	
const state: IHooksOptions = reactive({
	dataListUrl: '/ss/refund-order/page',
	deleteUrl: '/ss/refund-order',
	queryForm: {
		refundOrderId: ''
	}
})

// 状态映射
const getStatusText = (status: number) => {
	const statusMap: { [key: number]: string } = {
		0: '待退款',
		1: '已退款'
	}
	return statusMap[status] || '未知状态'
}

const getStatusTag = (status: number) => {
	const tagMap: { [key: number]: string } = {
		0: 'info',
		1: 'warning',
		2: 'success',
		3: 'danger'
	}
	return tagMap[status] || 'info'
}

const queryRef = ref()
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateVisible.value = true
	nextTick(() => addOrUpdateRef.value.init(id))
}

// 退款相关响应式数据
const refundDialogVisible = ref(false)
const refundFormRef = ref<FormInstance>()
const originAmount = ref(0)
const currentRefundRow = ref<any>(null)

const refundForm = reactive({
	amount: 0,
	refundDesc: ''
})

// 退款表单验证规则
const refundRules = reactive<FormRules>({
	amount: [
		{ 
			required: true, 
			message: '请输入退款金额', 
			trigger: 'blur' 
		},
		{ 
			type: 'number', 
			min: 0.01, 
			message: '退款金额必须大于0', 
			trigger: 'blur' 
		}
	],
	refundDesc: [
		{ 
			required: true, 
			message: '请输入退款原因', 
			trigger: 'blur' 
		}
	]
})

// 退款处理
const refundHandle = (row: any) => {
	// 重置表单
	refundForm.amount = 0
	refundForm.refundDesc = ''
	
	originAmount.value = row.refundOrderAmount
	currentRefundRow.value = row

	// 显示弹窗
	refundDialogVisible.value = true
}

// 确认退款
const confirmRefund = () => {
	refundFormRef.value?.validate((valid) => {
		if (valid) {
			ElMessageBox.confirm('确定要进行退款吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				request.post('/ss/refund-order/create-refund', { 
					orderId: currentRefundRow.value.refundFromOrderId,
					amount: refundForm.amount,
					refundDesc: refundForm.refundDesc,
					refundTransactionId: currentRefundRow.value.refundTransactionId
				}).then(res => {
					ElMessage.success('退款成功')
					refundDialogVisible.value = false
					getDataList() // 刷新列表
				}).catch(err => {
					ElMessage.error('退款失败：' + err.message)
				})
			}).catch(() => {
				ElMessage.info('已取消退款')
			})
		}
	})
}

const { 
	getDataList, 
	selectionChangeHandle, 
	sizeChangeHandle, 
	currentChangeHandle, 
	deleteBatchHandle, 
	downloadHandle, 
	reset 
} = useCrud(state)
</script>

<style scoped>
.layout-query {
	margin-bottom: 10px;
}
.layout-table {
	width: 100%;
	margin-top: 10px;
}
.tips {
	color: #999;
	font-size: 12px;
	margin-top: 5px;
}
</style>
